<template>
    <div class="box-content">
      <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname"/>
      <Search ref="topSearch" class="search" placeholder="调拨单号 | 调拨人" :isAdd="true" :isScreen="true" :isType="true"
              @onSearch="onSearch" @newBuild="newBuild('add', null)" @onScreen="onScreen"></Search>
      <div class="header">
        <div class="left-section" @click="showDatePicker = true">
          <span class="promise-period" :class="selectedPeriod === '调拨日期' ? 'default-style' : 'primary-color'
            ">{{ selectedPeriod }}</span>
        </div>
        <div class="right-section">
          <van-dropdown-menu active-color="#1989fa">
            <!--      <van-dropdown-item @change="changed1" v-model="params.type" :options="options1"/>-->
  
            <van-dropdown-item @change="changed2" v-model="params.outWarehouseId" :options="options3"/>
            <van-dropdown-item @change="changed3" v-model="params.inWarehouseId" :options="options4"/>
            <!--      </div>-->
          </van-dropdown-menu>
        </div>
      </div>
      <search-tag ref="SearchTag" :propsForSon="propsForSon" @confirmSearch="confirmSearch"
                  v-show="showSearchTag"></search-tag>
  
      <van-calendar v-model="showDatePicker" title="调拨日期" type="range" color="rgb(24, 144, 255)"
                    :default-date="defaultDate" :maxDate="maxDate" :minDate="minDate" :show-confirm="true"
                    @confirm="handleDateConfirm($event, false)"/>
  
      <!--分页列表 -->
      <div class="listBox" :style="{
        height: GLOBAL.currentEnvironment
          ? 'calc(100vh - 1rem)'
          : 'calc(100vh - 1.5rem)',
      }">
        <pageList ref="pageList" :checkedShow="checkedShow" :listUrl="listUrl" @getCheckedValue="getCheckedValue"
                  @handleList="handleList">
          <div slot="head" slot-scope="{ item }" class="title"
               style="width: 100%; margin-left: 0.12rem; margin-right: 0rem">
            <div style="margin-left: 0">
              <div style="
                  display: inline-block;
                  width: 2.3rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-weight: bold;
                ">
                <span class="icon"></span> {{ item.allotOrder }}
              </div>
            </div>
          </div>
          <div class="rt-column" slot="body" slot-scope="{ item }">
            <div class="rt-row">
              <div class="column">
                <span class="column-t">调拨物品种类：</span>
                <div class="column-c">
                  {{ item.goodsTypeNum || "-" }}
                </div>
              </div>
            </div>
            <div class="rt-row">
              <div class="column">
                <span class="column-t">调拨总量：</span>
                <div class="column-c">
                  {{ item.qualifiedNum || "-" }}
                  <span v-if="item.qualifiedNum">
                    <span style="display: inline-block;width: 1px;"></span>
                    {{ item.basicUnit }}</span>
                </div>
              </div>
            </div>
            <div class="rt-row">
              <div class="column">
                <span class="column-t">调拨人: </span>
                <div class="column-c" style="padding-left: 8px;">
                  {{ item.createBy || "-" }}
                </div>
              </div>
            </div>
          </div>
          <div slot="label" slot-scope="{ item }">
            <div class="label">
              <span>出库类型</span>
              <span>{{ item.outWarehouseName }}</span>
            </div>
          </div>
        </pageList>
      </div>
    </div>
  </template>
  
  <script>
  import Search from "@/components/search";
  import SearchTag from "./SearchTag";
  import Navbar from "@/components/navBar/navBar_right";
  import TabBar from "@/components/TabBar";
  import pageList from "@/components/pageList";
  import {
    getDictModel,
    wmsWarehouseGetWmsWaterhouse,
    wmsWarehouseQueryList,
  } from "@/api/system";
  import {stockListApi} from "@/api/mobile";
  import moment from "moment/moment";
  
  export default {
    name: "carRoomList",
    components: {Navbar, TabBar, pageList, Search, SearchTag},
    data() {
      return {
        // selectedPeriod: "调拨日期",
        // selectedPeriod: `${moment(new Date(new Date().getFullYear(), new Date().getMonth(), 1)).format('YYYY-MM-DD')}~${moment(new Date()).format('YYYY-MM-DD')}`,  // moment(dateInfo[0]).format('YYYY-MM-DD')
        maxDate: new Date(new Date().getFullYear() + 1, new Date().getMonth() + 2, 1),
        minDate: new Date(new Date().getFullYear() - 1, new Date().getMonth() - 1, 1),
        defaultDate: [new Date(), null],
        promiseDateIcon: {
          name: "arrow-down",
          color: "#333",
        },
        showDatePicker: false,
        selectedDate: new Date(),
        title: "库存调拨",
        rtitle: "",
        rname: "", //search
        active: "0",
        checkedShow: false, //列表是否支持选择
        operationTxt: "", //选择按钮名称
        listUrl: "/wms/wmsStockAllot/list", //列表接口
        columns: {
          titleKey: "goodsCode", //标题
          subtitleKey: "goodsName", //副标题
          content: [
            //内容
            {
              name: "合格品",
              key: ["goodsQualifiedNum", "assistUnit"],
            },
            {
              name: "报废品",
              key: ["goodsScrapNum", "assistUnit"],
            },
          ],
          labelKey: ["spec"], //标签
          // operation: [],
          operationText: "水位管理",
        },
        showSearchTag: false,
        keyword: "",
        params: {
          inWarehouseId: "",
          outWarehouseId: "",
          allotBeginTime: "",
          allotEndTime: "",
        },
        options1: [],
        options2: [],
        options3: [],
        options4: [],
        options3_copy: [],
        propsForSon: {},
        searchValue: "",
        searchVisible: false,
      };
    },
    beforeRouteLeave(to, from, next) {
      let that = this;
      switch (true) {
        case that.showSearchTag:
          that.showSearchTag = false;
          this.title = "库存调拨";
          next(false);
          break;
        case !that.showSearchTag:
          next();
          break;
      }
    },
    computed: {
      selectedPeriod() {
        if (this.params.allotBeginTime && this.params.allotEndTime) {
          return `${this.params.allotBeginTime.slice(
              0,
              10
          )}~${this.params.allotEndTime.slice(0, 10)}`;
        }
        return "调拨日期";
      },
    },
    mounted() {
      this.searchQuery();
    },
    created() {
      let parameters = {dictCode: "wms_goods_type"};
      getDictModel(parameters).then((res) => {
        if (res.code == 200) {
          this.options1 = [{text: "物品类型", value: ""}];
          this.options1 = this.options1.concat(res.result);
          this.$refs.SearchTag.options1 = this.options1;
        }
      });
      stockListApi().then((res) => {
        if (res.code == 200) {
          this.options2 = [{text: "调出仓库", value: ""}];
          this.options2 = this.options2.push(res.result);
          this.$refs.SearchTag.options2 = res.result;
        }
      });
      this.getWarehose();
    },
    methods: {
      handleDateConfirm(dateInfo) {
        this.showDatePicker = false;
        console.log(dateInfo, "dateInfo-dateInfo");
        // // 处理选中的自定义日期
        const startDate = moment(dateInfo[0]).format("YYYY-MM-DD");
        const endDate = moment(dateInfo[1]).format("YYYY-MM-DD");
        // this.selectedPeriod = `${startDate}~${endDate}`;
        this.showDatePicker = false;
        this.params.allotBeginTime = moment(dateInfo[0]).format(
            "YYYY-MM-DD 00:00:00"
        );
        this.params.allotEndTime = moment(dateInfo[1]).format(
            "YYYY-MM-DD 23:59:59"
        );
        // this.$refs.SearchTag.setDefaultDate(dateInfo)  // 修改子组件内部时间的参数
        this.searchQuery(); // 更新数据
      },
      getWarehose(obj) {
        wmsWarehouseQueryList(obj).then((res) => {
          if (res.code == 200) {
            this.options3 = [{text: "调出仓库", value: ""}];
            this.options4 = [{text: "调入仓库", value: ""}];
            this.options3 = this.options3.concat(res.result);
            this.options4 = this.options4.concat(res.result);
            this.options3_copy = this.options3;
            this.$refs.SearchTag.options3 = this.options3;
          }
        });
      },
      searchWarehose(v) {
        if (v) {
          this.getWarehose({warehouseName: v});
        } else {
          this.getWarehose();
        }
      },
      // 水位管理
      operationItem(item) {
        this.$router.push({
          path: "/stockManagementForm",
          query: {info: JSON.stringify(item)},
        });
      },
      changed1(v) {
        this.options1.forEach((item) => {
          if (item.value == v) {
            this.params.typeText = v ? item.text : "";
          }
        });
        this.searchQuery();
      },
      changed2(v) {
        console.log(this.options2);
        this.options3.forEach((item) => {
          if (item.value == v) {
            this.params.outWarehouseId = v ? item.value : "";
          }
        });
        this.searchQuery();
      },
      changed3(v) {
        this.options4.forEach((item) => {
          if (item.value == v) {
            this.params.inWarehouseId = v ? item.value : "";
          }
        });
        this.searchQuery();
      },
      // 点击新建
      newBuild(type, itemInfo) {
        console.log(type, itemInfo);
        if (type === "add") {
          this.$router.push("/stockAllocationAdd");
        } else {
          this.$router.push({
            path: "/stockAllocationAdd",
            query: {id: itemInfo.id},
          });
        }
      },
      onSearch(v) {
        this.keyword = v;
        console.log(this.keyword);
        this.searchQuery();
      },
      onScreen() {
        console.log("筛选");
        this.keyword = this.$refs.topSearch.value;
        this.propsForSon = {
          ...this.params,
        };
        this.propsForSon.keyword = this.keyword;
        this.showSearchTag = true;
        this.title = "更多筛选";
      },
      confirmSearch(p, k) {
        this.params = p;
        this.keyword = k;
        this.showSearchTag = false;
        console.log(this.params);
        this.$refs.topSearch.value = k;
        this.title = "库存调拨";
        this.searchQuery();
      },
      // 获取选择的列表数据
      getCheckedValue(ids, item) {
        console.log(ids, item);
      },
      //列表点击事件
      handleList(id, item, type) {
        // this.$router.push({
        //   path: '/stockManagementDetail',
        //   query: {id: item.goodsId}
        // })
        this.$router.push({
          path: "/warehouseManagement/stockAllocation/stockAllocationDetail",
          query: {id: item.id},
        });
      },
      // 加载列表
      getList() {
        // 传1代表从第一条数据开始
        this.$refs.pageList.onLoad(1);
      },
      // 搜索
      searchQuery() {
        // 搜索条件
        let queryParam = {
          ...this.params,
        };
        queryParam.keyword = this.keyword;
        this.$refs.pageList.searchQuery(queryParam);
      },
      // 重置
      searchReset() {
        this.$refs.pageList.searchReset();
      },
      goSearch() {
        this.$router.push({path: "/carRoomPlaneSearch"});
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .default-style {
    font-size: 0.15rem;
    color: #323232;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.16rem;
    background-color: #fff;
  }
  
  .right-section {
    flex: 5;
    cursor: pointer;
  }
  
  .left-section {
    flex: 2;
    position: relative;
    cursor: pointer;
  }
  
  .left-section::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    /* 使用 rem 单位 */
    transform: translateY(-50%);
    border-style: solid;
    border-color: #e3e5e6;
    /* 修改箭头颜色 */
    transition: transform 0.3s ease;
    width: 0;
    height: 0;
    border-top: 5px solid #e3e5e6;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 0;
  }
  
  /deep/ .van-dropdown-menu__bar {
    box-shadow: none;
  }
  
  /deep/ .van-dropdown-menu__title {
    min-width: 0.8rem;
  }
  
  .promise-period {
    //margin-right: 0.05rem;
    //min-width: 3rem;
    display: block;
    position: relative;
  
    &::after {
      position: absolute;
      top: 50%;
      right: 20px;
      margin-top: -5px;
      border: 3px solid;
      border-color: transparent transparent #dcdee0 #dcdee0;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      opacity: .8;
      content: ''
    }
  }
  
  .primary-color {
    color: #1890ff;
  
  
    &::after {
      position: absolute;
      top: 50%;
      right: 1px;
      margin-top: -5px;
      border: 3px solid;
      border-color: transparent transparent #dcdee0 #dcdee0;
      margin-top: -1px;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      opacity: .8;
      content: ''
    }
  }
  
  .dropdown-menu {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 200px;
  }
  
  .rt-row {
    display: flex;
  
    .column {
      //width: 50%;
      display: flex;
      //flex-direction: column;
      justify-content: space-between;
      font-size: 0.14rem;
      margin: 0.08rem 0.125rem;
  
      .column-t {
        color: #888888;
      }
  
      .column-c {
        color: #191f25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  
  .icon {
    display: inline-block;
    width: 0.03rem;
    height: 0.14rem;
    background: #1890ff;
    //   margin-right: 0.05rem;
    position: relative;
    //   left: -0.1rem;
    top: 0.01rem;
  
    right: 0.009rem;
  }
  
  .box-content {
    height: 100vh;
    overflow-y: scroll;
  
    .serach {
      height: 0.33rem;
      background: #f2f2f6;
      border-radius: 0rem;
      margin-bottom: 0.16rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 0.33rem;
      padding: 0.1rem 0.12rem;
  
      // border: 1px solid red;
      .placeh {
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        line-height: 0.23rem;
      }
  
      .icon {
        width: 0.15rem;
        height: 0.16rem;
      }
    }
  
    .serach-content {
      // height: 1.52rem;
      background: #ffffff;
      padding: 0 0.16rem 0.16rem 0.16rem;
  
      .content {
        display: flex;
  
        .tapbtn {
          // height: 0.23rem;
          // background: #1890ff;
          background: #f2f2f6;
          border-radius: 0.02rem;
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #888888;
          line-height: 0.23rem;
          margin-right: 0.12rem;
          text-align: center;
          padding: 0.04rem 0.28rem;
          cursor: pointer;
        }
  
        .active {
          color: #ffffff;
          background: #1890ff;
        }
      }
    }
  }
  
  .label {
    margin-left: -0.03rem;
    margin-top: -0.1rem;
  
    span {
      height: 0.16rem;
      background: #f0f6fe;
      color: #1890ff;
      margin-right: 0.1rem;
      padding: 0.03rem 0.08rem;
      font-size: 0.11rem;
      border-radius: 0.03rem;
    }
  }
  
  .foot-slot {
    height: 0.33rem;
    line-height: 0.33rem;
    display: flex;
    justify-content: space-between;
    margin: 0.15rem 0.12rem 0 0.12rem;
    font-size: 0.14rem;
    color: #1890ff;
  }
  
  .listBox {
    height: calc(100vh - 1.5rem);
    overflow-y: auto;
  }
  
  /deep/ .van-nav-bar {
    z-index: 99 !important;
  }
  
  .drop-wrap {
    position: relative;
  
    /deep/ .van-dropdown-item__content {
      padding-top: 40px !important;
    }
  
    .drop-search {
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 99999;
    }
  }
  </style>
  